<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>艺术精品</text>
			<image src="/static/svg/togive.svg"   class="header-right-img" slot="right" @tap="toRelease"></image>
		</pageHeader>
		<view style="width: 750rpx"  :style="{height:height}" v-if="list1.length>0">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='list1'>
				<xgWaterfallItem  v-for='(item,index) in list1' :key='index' >
					<fineArt :message='item' @praise='fineArtPraise' :index='index' :isInMy='true'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<uni-load-more status="loading"  v-if="showLoading" style="margin-top: 30rpx;"/>
		<uni-load-more status="noMore" v-if="list1.length>0&&!showLoading&&!hasMore"  style="margin-top: 30rpx;"/>
		<view class="noResult" v-if="list1.length<=0&&!showLoading">
			<image src="/static/img/none.png" mode=""></image>
			<text>空空如也，赶紧去发布</text>
		</view>
		<view style="height: 30rpx"></view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import pageHeader from "@/components/header/header.vue"
	import xgWaterfall from "@/components/xg-waterfall/xg-waterfall.vue"
	import xgWaterfallItem from "@/components/xg-waterfall-item/xg-waterfall-item.vue"
	import fineArt from "@/components/index/fineArt.vue"
	export default {
		components: {pageHeader,xgWaterfall,xgWaterfallItem,fineArt},
		data() {
			return {
				height:0,
				list1:[],
				pageNumber:1,
				showLoading:false,
				hasMore:true,
			};
		},
		onShow() {
			this.list1=[]
			this.pageNumber=1
			this.hasMore=true
			this.getMessagre()
		},
		onReachBottom(){
			if(this.hasMore){
				this.pageNumber+=1
				this.getMessagre()
			}
		},	
		methods: {
			async getMessagre(){
				this.showLoading=true
				let res=await urls.myAddFine({userId:localStorage.getItem("userId"),page:this.pageNumber,count:12})
				let list=res.data.list
				for(let a=0;a<list.length;a++){
					this.list1.push(list[a])
				}
				if(res.data.hasMore==0){
					this.hasMore=false
				}else{
					this.hasMore=true
				}
				this.showLoading=false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			success(e){
				this.height=e+'px'
			},
			toRelease(){
				uni.navigateTo({
					url: '/pages/ReleaseFineArt/release'
				})
			},
			fineArtPraise(index,isAlready){
				if(!isAlready){
					this.list1[index].zan="1"
					this.list1[index].zanNumber-=1
				}else{
					this.list1[index].zan="0"
					this.list1[index].zanNumber+=1
				}	
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F7F7F7;
}
.header-right-img{
	height: 44rpx;
	width: 44rpx;
	margin-right: 24rpx;
}
.noResult{
	display: flex;
	flex-flow: column;
	align-items: center;
	padding-top: 143rpx;
	image{
		height: 289rpx;
		width: 374rpx;
		display: block;
	}
	text{
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 60rpx;
	}
}
</style>
